<template>
<!--
1、先npm安装vue-echarts
npm install echarts vue-echarts-->
  <!--<div>123</div>-->
  <div>
    <el-row>
      <!--卡片第1列-->
      <el-col :span="22" :offset="1">
        <div class="grid-content bg-purple">
          <!--卡片shart-->
          <el-card class="box-card" style="">
            <!--卡片第1行-->
            <div style="paddign:0 20px;padding-bottom:20px;border-bottom: 3px solid #F1F1F1;">
              <el-row>
                <el-col :span="3" :offset="0">
                  诊所收入趋势
                </el-col>
                <el-col :span="1" :offset="17">
                  <el-tag v-for="item in items1"
                          :key="item.label"
                          :type="item.type"
                          effect="dark">
                    {{ item.label }}
                  </el-tag>
                </el-col>
                <el-col :span="1" :offset="1">
                  <el-tag v-for="item in items2"
                          :key="item.label"
                          :type="item.type"
                          effect="plain">
                    {{ item.label }}
                  </el-tag>
                </el-col>
              </el-row>
            </div>

            <!--卡片第2行-->
            <div style="margin:0 20px;">
              <el-row>
                <el-col :span="3" :offset="0">
                  <div style="margin-top:30px;margin-bottom:-35px;font-size:10px;">单位（元）</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" :offset="0">
                  <div style="width:800px">
                  <!--折线图-->
                  <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <!--卡片end-->
        </div>
      </el-col>

      <!--卡片第2列-->
      <el-col :span="22" :offset="1">

      </el-col>
    </el-row>
  </div>

</template>

<script>

    export default {
      name: "zhytestEchart.vue",
      data () {
        return {
          items1: [
            { type: 'danger', label: '近7天' }
          ],
          items2: [
            { type: 'info', label: '近30天' }
          ],
          orgOptions: {},
        }
      },
      mounted() {
        this.orgOptions = {
          xAxis: {
            type: 'category',
            data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [3100, 2514, 3611, 5000, 3415, 1958, 4054],
            type: 'line',
            smooth: true
          }]
        }
      }
    }
</script>

<style scoped>

</style>
